/* text
 ********************************************************************/
// 水平对齐
.foxui-align-left {
    text-align: left !important;
}
.foxui-align-right {
    text-align: right !important;
}
.foxui-align-center {
    text-align: center !important;
}
.foxui-align-justify {
    text-align: justify !important;
}

// 颜色
.foxui-color-primary {
    color: $--color-primary !important;
}
.foxui-color-danger {
    color: $--color-danger !important;
}
.foxui-color-warning {
    color: $--color-warning !important;
}
.foxui-color-success {
    color: $--color-success !important;
}
.foxui-color-white {
    color: $--color-white !important;
}
.foxui-color-black {
    color: $--color-black !important;
}
.foxui-color-dark {
    color: $--color-text-primary !important;
}
.foxui-color-regular {
    color: $--color-text-regular !important;
}
.foxui-color-secondary {
    color: $--color-text-secondary !important;
}
.foxui-color-placeholder {
    color: $--color-text-placeholder !important;
}

// 字号
.fs-1 {
    font-size: calc(1.375rem + 1.5vw) !important;
}
.fs-2 {
    font-size: calc(1.325rem + .9vw) !important;
}
.fs-3 {
    font-size: calc(1.3rem + .6vw) !important;
}
.fs-4 {
    font-size: calc(1.275rem + .3vw) !important;
}
.fs-5 {
    font-size: 1.25rem !important;
}
.fs-6 {
    font-size: 1rem !important;
}
@media (min-width:1200px) {
    .fs-1 {
        font-size: 2.5rem !important;
    }
    .fs-2 {
        font-size: 2rem !important;
    }
    .fs-3 {
        font-size: 1.75rem !important;
    }
    .fs-4 {
        font-size: 1.5rem !important;
    }
    .fs-5 {
        font-size: 1.25rem !important;
    }
    .fs-6 {
        font-size: 1rem !important;
    }
}
@include fontSize(none);
@each $size in $mediaSizeList {
    @include utils-media-block($size) {
        @include fontSize($size);
    }
}

// 字重
.foxui-fw-bold {
    font-weight: 700 !important;
}
.foxui-fw-bolder {
    font-weight: bolder !important;
}
.foxui-fw-normal {
    font-weight: normal !important;
}
.foxui-fw-light {
    font-weight: 300 !important;
}
.foxui-fw-lighter {
    font-weight: lighter !important;
}

// 斜体
.foxui-fst-italic {
    font-style: italic !important;
}
.foxui-fst-normal {
    font-style: normal !important;
}

// 行高
.foxui-lh-1 {
    line-height: 1;
}
.foxui-lh-sm {
    line-height: 1.25;
}
.foxui-lh-base {
    line-height: 1.5;
}
.foxui-lh-lg {
    line-height: 2;
}

// 字每大小写、首字母大写
.foxui-text-lowercase {
    text-transform: lowercase !important;
}
.foxui-text-uppercase {
    text-transform: uppercase !important;
}
.foxui-text-capitalize {
    text-transform: capitalize !important;
}

// 不换行与换行
.foxui-text-nowrap {
    white-space: nowrap !important;
}
.foxui-text-wrap {
    word-wrap: break-word;
    word-break: bread-all;
}

// 隐藏
.foxui-text-hide {
    font: 0/0 a !important;
    text-shadow: none !important;
    color: transparent !important;
}

/**
 * @description: 单行文本超出省略
 * @Date: 2022-03-14 22:34:33
 */
.foxui-ellipsis {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

/**
 * @description: 多行文本超出省略
 * @Date: 2022-03-17 15:59:25
 */
.foxui-line-1 {
    @include ellipsis-row(1);
}

.foxui-line-2 {
    @include ellipsis-row;
}

.foxui-line-3 {
    @include ellipsis-row(3);
}

.foxui-line-4 {
    @include ellipsis-row(4);
}

.foxui-line-5 {
    @include ellipsis-row(5);
}

.foxui-line-6 {
    @include ellipsis-row(6);
}

.foxui-line-7 {
    @include ellipsis-row(7);
}

.foxui-line-8 {
    @include ellipsis-row(8);
}

/* background
 ********************************************************************/
.foxui-bg-primary {
    background-color: $--color-primary !important;
}
.foxui-bg-warning {
    background-color: $--color-warning !important;
}
.foxui-bg-danger {
    background-color: $--color-danger !important;
}
.foxui-bg-success {
    background-color: $--color-success !important;
}
.foxui-bg-info {
    background-color: $--color-info !important;
}
.foxui-bg-white {
    background-color: $--color-white !important;
}
.foxui-bg-lighter {
    background-color: $--border-color-lighter !important;
}
.foxui-bg-exlight {
    background-color: $--border-color-extra-light !important;
}
.foxui-bg-black {
    background-color: $--color-black !important;
}
.foxui-bg-transparent {
    background-color: transparent !important;
}

/* border
 ********************************************************************/
// 添加边框
.foxui-border {
    border: $--border-base;
}
.foxui-border-bottom {
    border-bottom: $--border-base;
}
.foxui-border-top {
    border-top: $--border-base;
}
.foxui-border-left {
    border-left: $--border-base;
}
.foxui-border-right {
    border-right: $--border-base;
}
// 边框颜色
.foxui-border-primary {
    border-color: $--color-primary;
}
.foxui-border-warning {
    border-color: $--color-warning;
}
.foxui-border-danger {
    border-color: $--color-danger;
}
.foxui-border-success {
    border-color: $--color-success;
}
.foxui-border-info {
    border-color: $--color-info;
}
.foxui-border-black {
    border-color: $--color-black;
}
.foxui-border-white {
    border-color: $--color-white;
}
.foxui-border-light {
    border-color: $--border-color-light;
}
.foxui-border-lighter {
    border-color: $--border-color-lighter;
}
.foxui-border-exlight {
    border-color: $--border-color-extra-light;
}
// 边框大小
.foxui-border-1 {
    border-width: 1px !important;
}
.foxui-border-2 {
    border-width: 2px !important;
}
.foxui-border-3 {
    border-width: 3px !important;
}
.foxui-border-4 {
    border-width: 4px !important;
}
.foxui-border-5 {
    border-width: 5px !important;
}
.foxui-border-6 {
    border-width: 6px !important;
}
// 去掉边框
.foxui-border-0 {
    border: 0 !important;
}
.foxui-border-top-0 {
    border-top: 0 !important;
}
.foxui-border-bottom-0 {
    border-bottom: 0 !important;
}
.foxui-border-left-0 {
    border-left: 0 !important;
}
.foxui-border-right-0 {
    border-right: 0 !important;
}
.foxui-border-none {
    border: none !important;
}
// 圆角
@include radius();

/* padding, margin
 ********************************************************************/
@include spacing(none);
@each $size in $mediaSizeList {
    @include utils-media-block($size) {
        @include spacing($size);
    }
}

/* display
 ********************************************************************/
@include display(none);
@each $size in $mediaSizeList {
    @include utils-media-block($size) {
        @include display($size);
    }
}

/* flex
 ********************************************************************/

/* visible
 ********************************************************************/
.foxui-visible {
    visibility: visible !important;
}
.foxui-invisible {
    visibility: hidden !important;
}

/* opacity
 ********************************************************************/
.foxui-opacity-0 {
    opacity: 0 !important;
}

.foxui-opacity-25 {
    opacity: 0.25 !important;
}

.foxui-opacity-50 {
    opacity: 0.5 !important;
}

.foxui-opacity-75 {
    opacity: 0.75 !important;
}

.foxui-opacity-100 {
    opacity: 1 !important;
}

/* float
 ********************************************************************/
@include float(none);
@each $size in $mediaSizeList {
    @include utils-media-block($size) {
        @include float($size);
    }
}
.foxui-clearfix {
    @include clearfix();
}

/* position
 ********************************************************************/
.foxui-position-static {
    position: static;
}

.foxui-position-relative {
    position: relative;
}

.foxui-position-absolute {
    position: absolute;
}

.foxui-position-fixed {
    position: fixed;
}

.foxui-position-sticky {
    position: sticky;
}

@include position();

.foxui-translate-middle {
    transform: translate(-50%, -50%);
}

.foxui-translate-middle-y {
    transform: translateY(-50%);
}

.foxui-translate-middle-x {
    transform: translateX(-50%);
}

/* width height
 ********************************************************************/
@include width();
@include height();
.foxui-mw-100 {
    max-width: 100%;
}
.foxui-mh-100 {
    max-height: 100%;
}

/* ratio
  ********************************************************************/
@include ratio();

/* img
  ********************************************************************/
.foxui-img-fluid {
    max-width: 100%;
}

.foxui-img-cover {
    object-fit: cover;
}

.foxui-img-contain {
    object-fit: contain;
}
